<template>
  <div class='personal-version-opening-guide'>
    <div class='personal-version-opening-guide__icon'>
      <i class='iconfont icon-notification-fill'></i>
    </div>
    <div class='personal-version-opening-guide__text'>
      你正在使用个人体验版，如需正式使用，请联系管理员
    </div>
    <div class='personal-version-opening-guide__button'>
      <el-button type="primary" block class="tabbar-panel-bottom-right-btn no-margin" @click="contactAdmin">
        联系管理员
      </el-button>
    </div>
  </div>
</template>

<script>
import { contactAdminToUseApp } from 'dingtalk-design-libs';

export default {
  name: 'personal-version-opening-guide',
  inject: ['initData'],
  data() {
    return {
      
    }
  },
  computed: {
    // 主企业id
    mainCorpId() {
      return this.personalConfigVO.mainCorpId || ''
    },
    /** 
     * @description 个人配置信息 
     * example: {
     *    是否是个人版
     *    "isPersonal": "false",
     *    主企业id
     *    "mainCorpId": "mainCorpId"
     *  }
    */
    personalConfigVO(){
      return this.initData ? this.initData?.personalConfigVO || {} : {}
    }
  },
  methods: {
    /**
     * @description: 联系管理员
     * -- 跳转钉钉指定页面
     * @return {void}
     */    
    contactAdmin() {
      const params = { 
        // 正式环境
        id: '3144',
        // 测试环境
        // id: '3397',
        corpId: this.mainCorpId,
      }
      
      console.log('ContactAdminSdk params: ', params)
      
      contactAdminToUseApp(params)
        .catch((err) => {
        // 入参不正确，或者遇到技术异常时才会进入这个链路
          console.error(err);
        })
    }
  }
}
</script>

<style lang="scss">
.personal-version-opening-guide {
  background-color: rgb(223, 233, 250);
  color: #0099FF;
  
  display: flex;
  flex: 1;
  align-items: center;
  
  padding: 8px 16px;
  
  font-size: $font-size-base;
  font-family: "'PingFang SC', -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif";
  
  &__icon {
    display: flex;
    justify-content: center;
    width: 24px;
    margin-right: 8px;
    i {
      font-size: 22px;
    }
  }
  &__text {
    flex: 1;
    @include text-ellipsis();
  }
  &__button {
    
    margin-left: 20px;
    margin-right: 20px;
    width: 94px;
    
    button {
      border-radius: 4px;
      height: 28px;
      font-size: 14px;
      padding: 6px 10px !important;
    }
  }
}

body {
  .personal-version-opening-guide {
    .personal-version-opening-guide__button button {
      border-color: rgb(0, 120, 254) !important;
      background-color: rgb(0, 120, 254) !important;
      &:hover {
        border-color: rgba(0, 120, 254, 0.8) !important;
        background-color: rgba(0, 120, 254, 0.8) !important;
      }
    }
  }
}
</style>